<!-- 原：toolManage -->
<template>
  <div style="background: #fff; padding: 30px">
    <div class="Title">留资&打卡抽奖记录</div>
    <!-- <div class="flewbtn">
      <el-select v-model="state.value" placeholder="展具类型" class="elSelect_a" size="large">
        <el-option v-for="item in state.options" :key="item.value" :label="item.label" :value="item.value"
          :popper-append-to-body="false" />
      </el-select>
      <el-select v-model="state.valueTwo" placeholder="展具级别" class="elSelect_a" size="large">
        <el-option v-for="item in state.optionsTwo" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-button size="large" type="primary" @click="checkSitelist">查询</el-button>
      <el-button size="large" @click="clearSiteItem">清除</el-button>
      <el-button size="large" @click="addSiteItem">增加</el-button>
    </div> -->
    <!-- 展示和编辑表格 -->
    <el-scrollbar style="margin-bottom: 20px" height="700px">

      <el-table :data="filterTableData" :header-cell-style="{
        'text-align': 'center',
        background: '#f2f3f5',
        height: '50px',
        color: '#000000',
        'font-size': '15px',
      }" :cell-style="{ 'text-align': 'center', height: '80px' }" style="width: 100%" ref="multipleTableRef"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />  <!-- 选框 -->
        <el-table-column label="展具级别配置" prop="flowTitle" width="210" />
        <el-table-column label="展具编号" prop="siteNum" width="200" />
        <el-table-column label="在展状态" prop="toolType" width="200" />
        <el-table-column label="设备类型" prop="toolLevel" width="180" />
        <el-table-column prop="sidName" width="200">
          <template #header>
            <div>绑定站点</div>
          </template>
          <template #default="scope">
            <div v-if="scope.row.Sid != 0">{{ scope.row.sidName }}站</div>
            <div v-else>-</div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="展具状态" prop="lineStatus" width="200"/> -->
        <el-table-column prop="lineStatus">
          <template #header>
            <div style="text-align: left">展具状态</div>
          </template>
          <template #default="scope">
            <div style="text-align: left; padding-left: 12px">
              {{ scope.row.lineStatus }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column align="right" width="200">
          <template #header>
            <div>操作</div>
          </template>
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)" type="primary" text>编辑</el-button>
            <template v-if="scope.row.Sid != 0">
              <el-button size="small" @click="handleDelete(scope.$index, scope.row)" type="primary" text>解绑
              </el-button>
            </template>
          </template>
        </el-table-column> -->
      </el-table>

    </el-scrollbar>
    <!-- 分页显示 -->
    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" background page-sizes="10"
      :small="small" :disabled="disabled" layout="total, prev, pager, next" :total="state.total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange"
      style="display: flex; justify-content: flex-end" />

    <!-- 编辑对话框 -->
    <el-dialog v-model="state.showModel" title="编辑项目" width="500px" align-center style="font-weight: 600">
      <el-scrollbar height="300px">
        <div style="display: flex; margin-bottom: 15px">
          <div class="line_a">展具级别选择</div>
          <el-select v-model="state.modelVal" class="elSelect" size="small" @change="getLineId">
            <el-option v-for="item in state.mouldArr" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div style="
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 15px;
          ">
          <div class="line_g">展具编号</div>
          <el-input v-model="state.inputVal" maxlength="20" size="small" style="flex: 8" class="enterpriseName" />
        </div>
        <div style="display: flex; justify-content: center; align-items: center">
          <div class="line_g">展具面积</div>
          <el-input v-model="state.areaVal" maxlength="20" size="small" style="flex: 8" class="enterpriseName" />
        </div>
        <div style="display: flex; margin-top: 20px">
          <div class="vestTit">设备类型</div>
          <div class="workInput_e">
            <el-checkbox-group v-model="state.vestLevel" :max="1" fill="#409eff" @change="getToolIdx">
              <el-checkbox v-for="(item, index) in state.siteList" :key="index" :label="item" name="vestVal" />
            </el-checkbox-group>
          </div>
        </div>
        <div style="display: flex; margin-top: 15px; margin-bottom: 25px">
          <div style="margin: 10px 14px 10px 31px; font-weight: 600">
            展具状态
          </div>
          <el-radio-group fill="#409eff" v-model="state.radioState" size="small">
            <el-radio-button label="启用" />
            <el-radio-button label="停用" />
          </el-radio-group>
        </div>
        <div class="dialog-footer">
          <el-button size="small" @click="closeModel"> 取消 </el-button>
          <el-button type="primary" size="small" @click="submitFrom">
            确认
          </el-button>
        </div>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script setup>
import { toRefs, reactive, computed, onMounted, ref } from "vue";
import { ArrowDown, Plus } from "@element-plus/icons-vue";
import http from "../libs/http";

const state = reactive({
  value: "",
  options: [],
  valueTwo: "",
  optionsTwo: [],
  mouldVal: "",
  mouldArr: [], //选择路线
  modelVal: "", //路线值
  modelValId: "", //路线Id
  tableData: [],
  showModel: false, //显示编辑弹窗
  dialogImageUrl: "",
  dialogVisible: false,
  worktype: [],
  vestVal: [],

  //需要提交的表单数据
  Lid: "",
  inputVal: "", //展具编号
  areaVal: "", //展具面积
  radioState: "启用",
  vestLevel: [], //选择设备类型
  siteList: ["新制作", "旧设备", "租赁"],
  toolSiteId: "",

  total: "", //总条数
  totalPage: "", //总页数
});

// 初始化获取工作流列表
// 数据初始化
onMounted(() => {
  getLineList();
  getDevpagelist();
});

//需要分页需要传一个页数
const getDevpagelist = async (pageId = 1) => {
  let param = {
    openid: localStorage.getItem("openid"),
    page: pageId,
  };
  const res = await http.$get("/apies/backend/getdevpagelists", param);
  if (res.code == 200) {
    let newWorkLine = [];
    let workLine = res.data.list;
    state.total = res.data.total;
    state.totalPage = res.data.total_page;
    console.log(workLine, ">>>>>>>路线工作流数组");
    workLine.map((i) => {
      // 渲染表格的数据
      newWorkLine.push({
        Lid: i.id,
        Sid: i.sid,
        sidName: i.site_name,
        flowTitle: i.sitetype_name,
        tid: i.tid,
        siteNum: i.sn,
        lineStatus: i.status == 1 ? "启用" : i.status == 0 ? "停用" : "异常",
        areaSize: i.size,
        toolType:
          i.type == 1
            ? "在工厂"
            : i.type == 2
              ? "在路上"
              : i.type == 3
                ? "在店里"
                : "",
        toolLevel:
          i.level == 1
            ? "新制作"
            : i.level == 2
              ? "旧设备"
              : i.level == 3
                ? "租赁"
                : "",
      });
    });
    state.tableData = newWorkLine;
  } else {
    console.log(">>>>数据列表获取失败！！！");
  }
};

// 获取所有路线id和名称
const getLineList = async () => {
  let param = {
    openid: localStorage.getItem("openid"),
  };
  const res = await http.$get("/apies/backend/getLineList", param);
  if (res.code == 200) {
    let allLine = [];
    res.data.list.map((i) => {
      allLine.push({
        label: i.name,
        value: i.id,
      });
      state.mouldArr = allLine;
    });
  }
};

// 获取路线的id值
const getLineId = (e) => {
  state.modelValId = e;
  console.log(e, ">>>>>>>>>>>");
  state.mouldArr.map((i) => {
    if (e == i.value) {
      console.log(i.label);
      state.modelVal = i.label;
    }
  });
};

// 显示图表逻辑
const search = ref("");
const filterTableData = computed(() =>
  state.tableData.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
);
// 编辑
const handleEdit = (index, row) => {
  state.showModel = true;
  // clearAllDate_a();

  let newRow = JSON.parse(JSON.stringify(row));
  state.Lid = newRow.Lid;
  console.log("拿到选中项的所有参数了", newRow);
  state.inputVal = newRow.siteNum;
  state.radioState = newRow.lineStatus;
  state.areaVal = newRow.areaSize;
  state.vestLevel = [newRow.toolLevel];
  state.toolSiteId =
    newRow.toolLevel == "新制作"
      ? 1
      : newRow.toolLevel == "旧设备"
        ? 2
        : newRow.toolLevel == "租赁"
          ? 3
          : "";
  // 路线名称和路线Id
  state.modelValId = newRow.tid;
  state.modelVal = newRow.flowTitle;
};

// 设备解绑操作
const handleDelete = async (index, row) => {
  let newRow_a = JSON.parse(JSON.stringify(row));
  let toolId = newRow_a.Lid;
  console.log(toolId, ">>>>>>>>>>>设备Id");
  ElMessageBox.confirm("是否要解除设备绑定?", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    confirmButtonClass: "confirmBtn",
  })
    .then(async () => {
      let param = {
        dev_id: toolId,
        openid: localStorage.getItem("openid"),
      };
      const res = await http.$get("/apies/backend/unbinddev", param);
      if (res.code == 200) {
        ElMessage({
          message: "解绑成功",
          type: "success",
        });
        getDevpagelist();
      } else {
        ElMessage("解绑失败！");
      }
    })
    .catch(() => {
      console.log(">>>>>>>取消退出解绑啦啦");
    });
};

// 多选和单选的逻辑
const multipleTableRef = ref();
const multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
  console.log(val, ">>>>>>>>>>>所有选中项");
};

// 分页显示逻辑
const currentPage4 = ref(1);
const pageSize4 = ref(10);
const small = ref(false);
const disabled = ref(false);

const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
  getDevpagelist(val);
};

//查询列表项
const checkSitelist = () => {
  console.log(">>>>查询");
};
// 清除列表项
const clearSiteItem = () => {
  console.log(">>>>清除");
};
// 增加列表项
const addSiteItem = () => {
  console.log(">>>>增加");
  state.Lid = "";
  state.showModel = true;
  clearAllDate_a();
};
// 关闭表单
const closeModel = () => {
  state.showModel = false;
};

// 获取展具类型Id值
const getToolIdx = (e) => {
  state.siteList.map((i, j) => {
    if (i == e[0]) {
      state.toolSiteId = j + 1;
    }
  });
};

// 清空表单所有数据
const clearAllDate_a = () => {
  state.inputVal = "";
  state.radioState = "启用";
  state.areaVal = "";
  state.vestLevel = [];
  state.toolSiteId = "";
  state.modelValId = "";
  state.modelVal = "";
};

// 非空判断，表单是不是有没有填的
const isKong = () => {
  if (
    state.inputVal == "" ||
    state.areaVal == "" ||
    state.vestLevel.length == 0 ||
    state.modelVal == ""
  ) {
    return false;
  } else {
    return true;
  }
};

// 提交表单数据按钮
const submitFrom = async () => {
  if (isKong()) {
    let Lid = state.Lid == "" ? 0 : state.Lid;
    let param = {
      dev_id: Lid,
      openid: localStorage.getItem("openid"),
      sn: state.inputVal,
      size: state.areaVal,
      level: state.toolSiteId,
      status:
        state.radioState == "启用" ? 1 : state.radioState == "停用" ? 0 : "",
      sitetype: state.modelValId,
    };
    console.log(">>>>>>>>>>需要提交的所有数据", param);
    const res = await http.$post("/apies/backend/editdev", param);
    if (res.code == 200) {
      getDevpagelist();
      state.showModel = false;
      state.Lid == ""
        ? ElMessage({
          message: "创建成功",
          type: "success",
        })
        : ElMessage({
          message: "编辑成功",
          type: "success",
        });
    } else {
      state.Lid == "" ? ElMessage("创建失败！") : ElMessage("编辑失败！");
      state.showModel = false;
    }
  } else {
    ElMessage("填空项不能为空!");
  }
};
</script>

<style scoped>
.Title {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 20px;
}

.flewbtn {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.elSelect_a {
  border-radius: 15px;
  width: 250px;
  margin-right: 15px;
}

::v-deep .elSelect_a .el-input__wrapper {
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  box-sizing: border-box;
  box-shadow: none;
}

.elSelect {
  border-radius: 15px;
  width: 250px;
  /* height: 28px; */
  flex: 8;
}

::v-deep .elSelect .el-input__wrapper {
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  box-sizing: border-box;
  box-shadow: none;
}

::v-deep .elSelect .el-input__wrapper:focus {
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  box-sizing: border-box;
  box-shadow: none;
  color: #c0c4cc;
}

::v-deep .elSelect .el-input__inner {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  box-shadow: none;
  padding: 0;
}

/* 改变输入框样式 */
::v-deep .enterpriseName .el-input__inner {
  /* width:100%; */
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  color: #000;
  padding: 10px;
  box-sizing: border-box;
  /* border-radius: 5px; */
  height: 25px;
  border-radius: 3px;
}

.enterpriseName ::v-deep .el-input__inner {
  border: none;
}

::v-deep .enterpriseName .el-input__wrapper {
  padding: 0;
}

/* 改变上传按钮样式 */
::v-deep.el-upload--picture-card,
::v-deep .el-upload-list__item {
  width: 100px;
  height: 100px;
  line-height: 110px;
  border: none;
  background: #fff;
}

/* 改变选择器样式 */
::v-deep .Selectbox .el-input__wrapper {
  /* width:100%; */
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  color: #000;
  padding: 10px;
  box-sizing: border-box;
  /* border-radius: 5px; */
  height: 28px;
  width: 100% !important;
  flex: 8;
}

::v-deep .Selectbox .el-input__wrapper .el-input__inner {
  border: none;
}

/* 改变文本域样式 */
::v-deep .textTip .el-textarea__inner {
  background-color: #e8e8e8;
  border-color: #c0c4cc;
  color: #000;
  padding: 10px;
  box-sizing: border-box;
}

.block-col-2 .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

/* 隐藏横向滚动条 */
.el-scrollbar__bar {
  display: none !important;
}

#el-id-878-3 .el-dialog__body {
  padding: 0 !important;
}

/* 改变上传框框的大小 */
::v-deep .el-upload--picture-card {
  border: 1px dashed #e7e7e9;
}

::v-deep .el-upload--picture-card:hover {
  border-color: #e7e7e9;
  color: #e7e7e9;
}

::v-deep .el-upload--picture-card {
  width: 70px;
  height: 70px;
  font-size: 16px !important;
}

::v-deep .el-upload {
  width: 70px;
  height: 70px;
  line-height: 50px;
  font-size: 16px;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 70px;
  height: 70px;
  line-height: 50px;
  font-size: 16px;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item-actions:hover {
  opacity: 1;
  font-size: 16px;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 70px;
  height: 70px;
  line-height: 50px;
  font-size: 16px;
}

::v-deep .el-upload--picture-card .el-icon-plus {
  width: 28px;
  height: 28px !important;
  line-height: 1.7 !important;
}

::v-deep .avatar {
  width: 70px;
  height: 70px;
}

/* 确认按钮样式 */
.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 60px;
}

/* 修改分页的背景颜色 */
::v-deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background-color: #409eff !important;
}

.line_a {
  /* flex: 2; */
  line-height: 22px;
  text-align: center;
  width: 92px;
  font-weight: 600;
  margin-right: 8px;
}

.line_b {
  font-weight: 600;
  display: flex;
  justify-content: center;
  margin-top: 7px;
  margin-left: 5px;
  margin-right: 17px;
}

.line_c {
  margin: 20px 14px 23px 7px;
  font-weight: 600;
  width: 90px;
  text-align: end;
  display: flex;
}

/* ::v-deep .el-icon svg {
    height: 2em !important;
    width: 1em;
  } */
.line_g {
  /* flex: 2; */
  line-height: 20px;
  text-align: center;
  font-weight: 600;
  /* width: 92px; */
  margin-left: 32px;
  margin-right: 12px;
}

.line_f {
  flex: 8;
  background-color: #e8e8e8;
  padding-left: 6px;
  border-radius: 3px;
  box-sizing: border-box;
}

.vestTit {
  font-weight: 600;
  display: flex;
  justify-content: center;
  margin-top: 7px;
  margin-left: 30px;
  margin-right: 10px;
  width: 60px;
}

.workInput_e {
  flex: 8;
  background-color: #e8e8e8;
  padding-left: 6px;
  border-radius: 3px;
  box-sizing: border-box;
}

/* 确认按钮颜色 */
.confirmBtn {
  background: #cb4058 !important;
  border: none !important;
  box-shadow: inset !important;
}
</style>